<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<jsp:include page="../../base/header.jsp"></jsp:include>
<link rel="stylesheet" type="text/css" href="static/plugins/webuploader/css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="static/plugins/webuploader/image-upload/style.css" />
<body style="background-color:#FFF;">
	<div class="page-header">
		<h1>
			新闻管理
			<small>
				<i class="icon-double-angle-right"></i>
				新闻栏目管理
			</small>
		</h1>
	</div>
	<div class="row" style="width: 100%;">
		<div class="col-xs-12">
			<div class="table-responsive">
				<table id="sample-table-1" class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th class="center">
								<label>
									<input type="checkbox" class="ace"/>
									<span class="lbl"></span>
								</label>
							</th>
							<th>栏目名称</th>
							<th>创建时间</th>
							<th>上级栏目</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						
					</tbody>
				</table>
			</div><!-- /.table-responsive -->
			<div class=" no-margin-top">
				<ul class="pagination pull-right no-margin">
				</ul>
			</div>
			<button class="btn btn-primary btn-xs">
				<i class="single-add icon-edit bigger-160 icon-only" href="#modal-table" data-toggle="modal"></i>
			</button>
			<button class="btn btn-danger btn-xs">
				<i class="batch-del icon-trash bigger-160 icon-only"></i>
			</button>
			<div id="modal-table" class="modal fade" tabindex="-1"  style="display:block">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header no-padding">
							<div class="table-header">
							</div>
						</div>
						<div class="modal-body no-padding">
							<form class="form-horizontal" role="form" style="margin-top:2rem;">
								<div id="modal-table-container"></div>
								<div class="space-4"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 栏目封面 </label>
									<div class="col-sm-9">
										<div id="wrapper" class="no-margin">
									        <div id="container" class="uploader-container col-xs-10 col-sm-10 no-padding" style="padding-bottom: 10px !important;">
									            <div id="uploader">
									            	<input type="hidden" for-format="empty-uploader" />
									            	<input type="hidden" for-format="reload-uploader"  url="news/col/detail" delUrl="news/col/del/pic" v="0"/>
									                <div class="queueList">
									                    <div id="dndArea" class="placeholder">
									                        <div id="filePicker"></div>
									                    </div>
									                    
									                </div>
									                <div class="statusBar" style="display:none;">
									                    <div class="info"></div>
									                </div>
									            </div>
									        </div>
									    </div>
									</div>
								</div>
								<div id="modal-table-btn"></div>
							</form>
						</div>
						<div class="modal-footer no-margin-top"></div>
					</div>
				</div>
			</div>
		</div><!-- /span -->
	</div>
	<script src="static/assets/js/bootbox.min.js"></script>
	<script src="static/assets/js/jquery.gritter.min.js"></script>
	<script src="static/plugins/system-plugins.js"></script>
	<script type="text/javascript" src="static/plugins/webuploader/dist/webuploader.js"></script>
	<script type="text/javascript" src="static/plugins/webuploader/upload.news.js"></script>
	<script type="text/javascript">
	$(function(){
		setTimeout(function(){
			$("#modal-table").css("display","none");
		},100);
		var names = [
			{
				name:'id',
				type:'main',
				input:'新闻栏目'
			},
			{
				name:'columnName',
				input:'栏目名称',
				size:'M'
			},
			{
				name:'createTime',
				type:"hidden"
			},
			{
 				name:function(index,value,isForInput){
 					if(isForInput)return 'higherColumnName';
 					return '<td value="' + value.higherColumnId + '">' + value.higherColumnName + '</td>';
 				},
 				input:function(value,isInit,isChar){
 					if(isChar)return '上级栏目';
 					if(isInit)return '<div class="col-sm-9"><input type="hidden" for-type="combox-select" data-v="id" data-t="columnName" url="news/col/all" name="higherColumnId" value="" /></div></div>';
 					return '<div class="col-sm-9"><input type="hidden" for-type="combox-select" url="news/col/all" data-v="id" data-t="columnName" name="higherColumnId" value="' + value.higherColumnId + '" /></div></div>';
 				},
 				size:'M'
 			}
		];
		var parms = {
			pageNum:1,
			pageSize:4
		};
		var urls = {
			load:'news/col/info',
			detail:'news/col/detail',
			del:'news/col/del',
			edit:'news/col/upd',
			add:'news/col/add',
			delBatch:'news/col/delall',
		};
		var config = {
 			uploader:true
 		};
		$.loadTbl(names,parms,urls,config,true);
	});
	jQuery(function($) {
		$('table th input:checkbox').on('click' , function(){
			var that = this;
			$(this).closest('table').find('tr > td:first-child input:checkbox')
			.each(function(){
				this.checked = that.checked;
				if(that.checked == true)$(this).closest('tr').addClass('selected');
				else $(this).closest('tr').removeClass('selected');
			});
				
		});
	
		$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
		function tooltip_placement(context, source) {
			var $source = $(source);
			var $parent = $source.closest('table')
			var off1 = $parent.offset();
			var w1 = $parent.width();
	
			var off2 = $source.offset();
			var w2 = $source.width();
	
			if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
			return 'left';
		}
	})
	</script>
</body>